<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>测试</title>
<style type="text/css">
#code{
	width:500px;
	height:200px;
}
#hint{
	padding:8px;
	border-left:2px solid #ccc;
	background-color:#eee;
	word-wrap:break-word;
	font-size:14px;
	color:#4d4d4d;
	line-height:1.5;
	font-family:consolas;
}
.css-comment{color:#999;}
.css-string{color:#060;}
.css-value{color:#00f;}
.css-name{color:#006;}
.css-selector{color:#f0f;}
</style>
</head>

<body>
<textarea id="code">
/*
	@name: ui-form
	@base: ui-form
	@desc: 通用表单
	@note: 
	@required: ui-input,ui-button
*/

.ui-form{
	margin-top:30px;
	font-family:'宋体';
}
.ui-form legend {
	display:none;
}

/* ui-fm-item clearfix */ 
.ui-fm-item:after{
  clear:both;
  content:'.';
  display:block;
  height:0;
  visibility:hidden;
}

/* form item */ 
.ui-fm-item {
	padding:0 5px 15px 170px;/* overwrite */
	*padding:0 5px 12px 170px;/* overwrite */
	_padding:0 5px 13px 170px;/* overwrite */
	zoom:1;
}
.ui-fm-label {
	float:left;
	width:170px;/* overwrite */
	margin-left:-170px;/* overwrite */
	padding-top:3px;
	*padding-top:4px;
	text-align:right;
	font-size:14px;
}
/* reset label padding */
.ui-fm-label-reset{
	padding-top:0;
}
.ui-fm-required {
	margin-right:6px;
	font-family:SimSun;
	font-size:14px;
	color:#f00;
}
.ui-fm-explain {
	padding:3px 0 0;
	padding:5px 0 0\9;
	_padding-top:3px;
	*margin-top:-1px;/* IE6/7 bugfix */
	_margin-left:3px;/* IE6 3px bugfix */
	font-size:12px;
	color:#B2B2B2;/* overwrite */
}
.ui-fm-other {
	_display:inline-block;
	margin-left:4px;
}
.ui-fm-item select{
	vertical-align:middle;
	padding:4px 3px;
	_padding:0;/* IE6 */
	_margin:4px 0 0;/* IE6 */
}
.ui-fm-item input{
	vertical-align:middle;
}

/* form status */
.ui-fm-status{
	color:#20B907;
	background:url(../../img/ui-fm-loading.gif) right bottom no-repeat;
	padding-right:15px;
}

/* radioes list */
.ui-fm-list{
	_float:left;
	_width:100%;
}

/* overwrite section */
.ui-fm-item .ui-input{
	font-size:12px;
	*font-size:11px;
	_font-size:12px;
	color:#000;/* overwrite */
	vertical-align:middle;
	*vertical-align: -5px;
}
.ui-fm-item .ui-button-group .ui-button-text-only{
	margin:3px 0 0;
	margin:2px 0 0\0;
}
.ui-fm-item .ui-button-text-only .ui-button-text{
	padding:.1em .5em;/* overwrite */
}
.ui-fm-item .ui-button-checkboxes .ui-state-selected{
	padding-right:2px;/* overwrite */
	background:url(../../img/ui-button-checkboxes-selected.png) right bottom no-repeat;
}

/* 
	status:form status type:hover,focus,error,warn
*/
/* form item hover */
.ui-fm-hover .ui-input,.ui-fm-hover .ui-textarea{
	border:1px #727272 solid;
}
/* form item focus */
.ui-fm-focus .ui-input,.ui-fm-focus .ui-textarea{
	border:1px #68ACFF solid;
	outline:1px aqua solid;
	*padding:1px 0 1px 2px;
	*border:2px #95DDFF solid;
	cursor:text;
}
.ui-fm-focus .ui-textarea{
	*padding:1px 0 1px 2px;
}
.ui-fm-focus .ui-fm-explain,
.ui-fm-hover .ui-fm-explain{
	color:#4D4D4D;
}

/* status error */
.ui-fm-error .ui-input,
.ui-fm-error .ui-textarea{
	border:1px #FF0000 solid;/* overwrite */
	color:#FF5243;/* overwrite */
}
.ui-fm-error .ui-input-reset{
	border:1px #9C9C9C solid;/* overwrite */
	color:#000000;/* overwrite */
}
.ui-fm-error .ui-fm-explain,
.ui-fm-warn .ui-fm-explain{
	background-image:url(../../img/ui-fm.png);
	background-repeat:no-repeat;
	padding-left:20px;/* overwrite */
	*zoom:1;
}

.ui-fm-error .ui-fm-explain{
	color:#FF5243;
	background-position:-186px 6px;/* overwrite */
}

.ui-fm-warn .ui-fm-explain{
	background-position:-138px -80px;/* overwrite */
}

.ui-fm-error .ui-input:hover,
.ui-fm-error .ui-textarea:hover{
	border:1px #727272 solid;/* overwrite */
	color:#727272;/* overwrite */
}
.ui-fm-error .ui-input:focus,
.ui-fm-error .ui-textarea:focus{
	border:1px #68ACFF solid;/* overwrite */
	color:#727272;/* overwrite */
}

</textarea>
<button id="btn">format</button>
<div id="hint" ></div>

<script type="text/javascript">
(function(){
	var reg, i,
		tableList="table|thead|tbody|tfoot|td|th|tr",
		formList="form|input|select|option|textarea",
		elCode = document.getElementById('code'),
		elShow = document.getElementById('hint');
	
	document.getElementById('btn').onclick = function(){
		var value = elCode.value;
		var objBuff = [];
		i = 0;
		value = value.replace(/&(\S+?;)/g, '&amp;$1').replace(/</g, '&lt;').replace(/>/g, '&gt;');
		
		//注释
		value = value.replace(/\/\*(?:.|\n)+?\*\//g, function(val){
			objBuff.push({
				cls: 'css-comment',
				value: val
			});
			return '__tmpBuff' + i++ + '__';
		});
		
		//字符串
		value = value.replace(/(\"|\').*?\1/g, function(val){
			return '<span class="css-string">' + val + '</span>';
		});
		
		//value
		value = value.replace(/:(.+?)(;|\})/g, function(val, a, b){
			return ':<span class="css-value">' + a + '</span>' + b;
		});
		
		//name
		value = value.replace(/\{([^\}]*)\}/g, function(val, a){
			return '{<span class="css-name">' + a + '</span>}';
		});
		
		//selector
		value = value.replace(/(\}|^)([^|{]*)\{/g, function(val, a){
			return '<span class="css-selector">' + val + '</span>';
		});
		
		value = value.replace(/__tmpBuff(\d+)__/g, function(val, index){
			return '<span class="' + objBuff[index].cls + '">' + objBuff[index].value + '</span>';
		});
		
		
		value = value.replace(/^\t+/gm, function(val){
			return (new Array(val.length + 1)).join('&nbsp;&nbsp;&nbsp;&nbsp;');
		});
		value = value.replace(/^ +/gm, function(val){
			return (new Array(val.length + 1)).join('&nbsp;');
		});
		
		value = value.replace(/\r?\n/g, function(val){
			return '<br />';
		});
		
		elShow.innerHTML = value;
	};
})();
</script>
</body>
</html>